import { computed } from 'vue'
import { RewardsHome } from '@/enums'
import { percentage, t } from '@/utils'
import { useAccountStore, useActivityStore } from '@/store'
import { AccountShowType } from '@/types'

export const useRewardsList = () => {
	const activityStore = useActivityStore()
	const rewardsList: any = computed(() => [
		//rfc
		{
			...RewardsHome.ftd,
			name: t('rewards.firstDepositTitle', {
				ratio: percentage(activityStore.status.deposit.maxRatio)
			}),
			type: 'ftd',
			subtitle: 'rewards.firstDepositSubtitle',
			tncLink: activityStore.status.deposit.router,
			bgColor: 'bg-gradient-3',
			bgColorPopup: 'bg-gradient-3',
			amountIcon: true,
			button: activityStore.depositButton(),
			amount: activityStore.status.deposit,
			isShow: activityStore.status.deposit.status === 'firstCharge'
		},
		//reload deposit
		{
			...RewardsHome.reload,
			name: t('rewards.reloadDepositTitle', {
				ratio: percentage(activityStore.status.deposit.maxRatio)
			}),
			type: 'ftd',
			tncLink: activityStore.status.deposit.router,
			bgColor: 'bg-gradient-3',
			bgColorPopup: 'bg-gradient-3',
			amountIcon: true,
			button: activityStore.depositButton(),
			amount: activityStore.status.deposit,
			isShow: activityStore.status.deposit.status === 'reload',
			timer: activityStore.status.deposit.endTimestamp
		},
		//lock bonus
		{
			...RewardsHome.lockBonus,
			name: t(RewardsHome.lockBonus.name),
			subtitle: t('rewards.lockBonusSubtitle'),
			type: 'lockBonus',
			bgColor: 'bg-lock-bonus',
			bgColorPopup: 'bg-lock-bonus',
			icon: 'activity/home-locked.png',
			popupIcon: 'activity/home-locked-square.png',
			// icon: 'activity/bonus.png',
			button: activityStore.lockBonusButton(),
			amount: activityStore.status.lockBonus,
			isShow:
				(activityStore.status.lockBonus.value > 0 ||
					activityStore.status.lockBonus.notReceivedAmount > 0) &&
				!activityStore.status.lockBonus.isExpiredAt,
			timer: activityStore.status.lockBonus.expiredAt
		},
		//weekly bonus
		//tournament bonus
		{
			...RewardsHome.bonus,
			name: t(RewardsHome.bonus.name),
			subtitle: t('rewards.bonusSubtitle'),
			type: 'bonus',
			bgColor: 'bg-gradient-5',
			bgColorPopup: 'rewards-bonus',
			icon: 'activity/bonus-square.png',
			popupIcon: 'activity/bonus.png',
			button: activityStore.receivedBonusButton(),
			amount: activityStore.status.receivedBonus,
			isShow: true
		},
		{
			...RewardsHome.cashback,
			name: t(RewardsHome.cashback.name),
			subtitle: t('rewards.cashbackSubtitle'),
			type: 'cashback',
			bgColor: 'bg-gradient-5',
			bgColorPopup: 'weekly-cashback',
			icon: 'activity/cashback.png',
			popupIcon: 'activity/cashback-square.png',
			button: activityStore.rebateButton(RewardsHome.cashback, activityStore.status.cashback),
			amount: activityStore.status.cashback,
			isShow: true
		},
		{
			...RewardsHome.sportsRebate,
			name: t(RewardsHome.sportsRebate.name),
			subtitle: t('rewards.sportsRebateSubtitle'),
			type: 'sportsRebate',
			bgColor: 'bg-gradient-5',
			bgColorPopup: 'sports-rebate',
			icon: 'activity/sports-rebate.png',
			popupIcon: 'activity/sports-rebate-square.png',
			button: activityStore.rebateButton(
				RewardsHome.sportsRebate,
				activityStore.status.sportsRebate
			),
			amount: activityStore.status.sportsRebate,
			isShow: true
		},
		{
			...RewardsHome.slotsRebate,
			name: t(RewardsHome.slotsRebate.name),
			subtitle: t('rewards.slotsRebateSubtitle'),
			type: 'slotsRebate',
			bgColor: 'bg-gradient-5',
			bgColorPopup: 'slots-rebate',
			icon: 'activity/slots-rebate.png',
			popupIcon: 'activity/slots-rebate-square.png',
			button: activityStore.rebateButton(RewardsHome.slotsRebate, activityStore.status.slotsRebate),
			amount: activityStore.status.slotsRebate,
			isShow: true
		},
		{
			...RewardsHome.casinoRebate,
			name: t(RewardsHome.casinoRebate.name),
			subtitle: t('rewards.casinoRebateSubtitle'),
			type: 'casinoRebate',
			bgColor: 'bg-gradient-5',
			bgColorPopup: 'casino-rebate',
			icon: 'activity/casino-rebate.png',
			popupIcon: 'activity/casino-rebate-square.png',
			button: activityStore.rebateButton(
				RewardsHome.casinoRebate,
				activityStore.status.casinoRebate
			),
			amount: activityStore.status.casinoRebate,
			isShow: true
		},
		//rfc end
		//expireBonus
		{
			...RewardsHome.expireBonus,
			name: t(RewardsHome.expireBonus.name),
			subtitle: '',
			type: 'expireBonus',
			bgColor: 'bg-bg-3',
			bgColorPopup: '',
			icon: '',
			amount: activityStore.status.expireBonus,
			isShow: activityStore.status.expireBonus.value > 0
		}
	])
	return rewardsList
}

export const onClickCardItem = (item: any) => {
	const activityStore = useActivityStore()
	const accountStore = useAccountStore()
	if (!accountStore.isLogin) {
		return accountStore.showAccount(AccountShowType.login)
	}
	if (item.id === 'ftd' || item.id === 'reload') {
		activityStore.depositButton().onClick()
		return false
	}
	activityStore.setRewardType(item.type)
	activityStore.setRewardPopupData(item)
	activityStore.setRewardPopupShow(true)
}
